<template>
  <div class="pending" v-if="chartData">
    <div class="span-text">
      <span class="text">重点人群占比率</span>
    </div>
    <div v-for="(item, index) in labels" :key="index" class="content">
      <div class="text">{{ item.label }}</div>
      <div class="progress">
        <el-progress
          style="width: 90%;"
          :text-inside="true"
          :stroke-width="16"
          :percentage="item.value"
          :status="getStatus(item.value)"
        />
        <div style="font-weight: bold; color: #626465">{{ item.value }}%</div>
      </div>
    </div>
  </div>
  <div v-else>
    <p>加载中...</p>
  </div>
</template>

<script>
export default {
  props: {
    chartData: {
      type: Object,
      required: true,
      validator(value) {
        return validateKeys(value);
      }
    }
  },
  data() {
    return {
      labels: [
        { label: '老年人人群占比率', key: 'lnrPointRate'},
        { label: '高血压人群占比率', key: 'gxypointRate' },
        { label: '糖尿病人群占比率', key: 'tnbPointRate' },
        { label: '严重精神障碍人群占比率', key: 'jsbPointRate' },
        { label: '肺结核人群占比率', key: 'hfjhPointRate' }
      ]
    };
  },
  watch: {
    chartData: {
      handler(newVal) {
        if (newVal && validateKeys(newVal)) {
          this.labels.forEach(label => {
            label.value = Math.min(Math.max(newVal[label.key] || 0, 0), 100);
            if (process.env.NODE_ENV !== 'production') {
              console.log(`Updated ${label.label} to ${label.value}`); // 生产环境下不打印调试信息
            }
          });
        } else {
          console.warn('Invalid or missing chartData:', newVal);
        }
      },
      immediate: true // 立即触发一次监听器以处理初始值
    }
  },
  methods: {
    getStatus(percentage) {
      if (percentage === 100) return 'success';
      if (percentage >= 80) return 'warning';
      if (percentage >= 50 && percentage < 80) return 'process'; // 更正为 'process'
      if (percentage < 50 && percentage > 0) return 'exception';
      return '';
    }
  }
};

// 提取验证逻辑为独立函数
function validateKeys(value) {
  const expectedKeys = ['hfjhPointRate', 'gxypointRate', 'jsbPointRate', 'lnrPointRate', 'tnbPointRate'];
  return expectedKeys.every(key => value.hasOwnProperty(key));
}
</script>

<style scoped>
.pending {
  width: 100%;
  height: 37vh;
  background-color: #fff;
  border-radius: 10px;
  /*border: red 1px solid;*/
  padding: 10px 20px;
  /*padding-right: 40px;*/
}

.content {
  /*margin: 10px;*/
}

.span-text {
  margin-bottom: 10px;
}

.span-text span {
  font-size: 18px;
  font-weight: bold;
  color: #454747;
}

.progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 15px;
}

.text {
  font-size: 14px;
  color: #2c3e50;
  padding-bottom: 10px;
}

/* 使用 :deep() 替代 ::v-deep */
.pending :deep(.el-progress-bar__innerText) {
  display: none !important;
}

.progress-text {
  margin-left: 10px;
  font-weight: bold;
}
</style>
